import QtQuick 2.15
import QtQuick.Layouts

Rectangle {
    id:dock
    radius: 10

    property var dockBtnInfoLeft:[
        {title:"灯全开",iconUrl:"qrc:/icon/icon/light_on.svg"},
        {title:"灯全关",iconUrl:"qrc:/icon/icon/light_off.svg"}
    ]
    property var dockBtnInfoRight:[
        {title:"窗帘开",iconUrl:"qrc:/icon/icon/light_on.svg"},
        {title:"窗帘关",iconUrl:"qrc:/icon/icon/light_off.svg"}
    ]
    property real temprature: 26

    Row{
        anchors.fill: parent
        Repeater {
            model: dockBtnInfoLeft.length
            delegate: Loader{
                id:dockBtnLeft
                width: parent.width / 8
                height: parent.height
                sourceComponent: DockBtn{}
                onLoaded: {
                    item.title=dockBtnInfoLeft[index].title
                    item.iconUrl=dockBtnInfoLeft[index].iconUrl
                }
                Connections{
                    target:dockBtnLeft.item
                    function onDockBtnClicked(title){
                        tcpSocket.sendMsg(title)
                        console.log(title)
                    }
                }
            }
        }

        Rectangle{//空调区域
            width: parent.width / 2
            height: parent.height
            color:btnColor
            Row{
                anchors.fill: parent
                Rectangle{//分隔符
                    width: 1
                    height: parent.height / 2
                    color:"grey"
                    anchors.verticalCenter: parent.verticalCenter
                }
                Rectangle{
                    width: parent.width / 4 * 3
                    height: parent.height
                    color: "transparent"
                    Row{
                        anchors.fill: parent
                        Rectangle{
                            width: parent.width/4
                            height: parent.height
                            color: "transparent"
                            Image {
                                id:airconditionIcon
                                anchors.centerIn: parent
                                source: "qrc:/icon/icon/airconditioning.svg"
                            }
                            Text {
                                anchors.top: airconditionIcon.bottom
                                anchors.horizontalCenter: parent.horizontalCenter
                                text: qsTr("空调")
                                color: textColor
                            }
                        }
                        Rectangle{
                            width: parent.width/4*3
                            height: parent.height
                            color:"transparent"
                            Row{
                                anchors.fill: parent
                                Item{
                                    width: parent.width/3
                                    height: parent.height
                                    Image {
                                        anchors.centerIn: parent
                                        source: "qrc:/icon/icon/left.svg"
                                    }
                                    MouseArea{
                                        anchors.fill: parent
                                        onClicked: {
                                            temprature = temprature-1
                                            var jsonData={
                                                "command":"control",
                                                "data":{
                                                    "name":"aircondition",
                                                    "value":temprature
                                                }
                                            }
                                            tcpSocket.sendMsg(jsonData)
                                        }
                                    }
                                }
                                Item{
                                    width: parent.width / 3
                                    height: parent.height
                                    Text {
                                        anchors.centerIn: parent
                                        text: qsTr(temprature+"℃")
                                        color:textColor
                                        font.bold: true
                                        font.pointSize: 28
                                    }
                                }
                                Item{
                                    width: parent.width/3
                                    height: parent.height
                                    Image {
                                        anchors.centerIn: parent
                                        source: "qrc:/icon/icon/right.svg"
                                    }
                                    MouseArea{
                                        anchors.fill: parent
                                        onClicked: {
                                            temprature = temprature+1
                                            var jsonData={
                                                "command":"control",
                                                "data":{
                                                    "name":"aircondition",
                                                    "value":temprature
                                                }
                                            }
                                            tcpSocket.sendMsg(jsonData)
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
                Rectangle{//分隔符
                    id:spac1
                    width: 1
                    height: parent.height / 2
                    color:"grey"
                    anchors.verticalCenter: parent.verticalCenter
                }
                Rectangle{
                    anchors.left: spac1.rigth
                    width: (parent.width-2)/4
                    height: parent.height
                    color: "transparent"
                    Image {
                        id:pureIcon
                        anchors.centerIn: parent
                        source: "qrc:/icon/icon/pure.svg"
                    }
                    Text {
                        anchors.top: pureIcon.bottom
                        anchors.horizontalCenter: parent.horizontalCenter
                        text: qsTr("净化")
                        color: textColor
                    }
                }
            }
        }

        Repeater {
            model: dockBtnInfoRight.length
            delegate: Loader{
                id:dockBtnRight
                width: parent.width / 8
                height: parent.height
                sourceComponent: DockBtn{}
                onLoaded: {
                    item.title=dockBtnInfoRight[index].title
                    item.iconUrl=dockBtnInfoRight[index].iconUrl
                }
                Connections{
                    target:dockBtnRight.item
                    function onDockBtnClicked(title){
                        tcpSocket.sendMsg(title)
                    }
                }
            }
        }

    }
}
